<template>
	<view class="dlbox">
		<!-- 类型选择 -->
		<view class="titbox">
			<view class="bj_around">
				<view class="tititem" v-for="item in titlist" @click="chzt(item)">
					{{item.name}}
				</view>
			</view>
			<view class="titbox-bottom">
				<image src="/static/login/1.png" class="titbox-bottom-bottomimg" :class="bottomc"
					:style="'transform: translateX('+ (dltype == 1 ? 72 : 430) +'rpx)'"></image>
			</view>
		</view>
		<!-- 输入框区域 -->
		<view class="dlinpbox">
			<view class="tyinputbox bj_left" style="margin-bottom: 30rpx;">
				<view class="icobox">
					<image src="/static/gj/bx.png" mode="widthFix"></image>
				</view>
				<view class="chyybox">
					+55
				</view>
				<input type="tel" maxlength="11" class="telinp" v-model="form.tel" :placeholder="$t('loginbox.tit3')" />
			</view>
			<view class="tyinputbox bj_left" style="margin-bottom: 30rpx;">
				<view class="icobox">
					<image src="/static/login/2.png" mode="widthFix"></image>
				</view>
				<input class="passinp" v-model="form.pass" :password="Password" maxlength="50"
					:placeholder="$t('loginbox.tit4')" />
				<image :src="Password ? '/static/login/poff.png' : '/static/login/pon.png'" style="width: 48rpx;"
					mode="widthFix" @click="showpass"></image>
			</view>
			<!-- <view class="tyinputbox bj_left" style="margin-bottom: 30rpx;" v-if="dltype == 2">
				<view class="icobox">
					<image src="/static/login/3.png" mode="widthFix"></image>
				</view>
				<input class="passinp" v-model="form.code" maxlength="50" :placeholder="$t('loginbox.tit8')" />
			</view> -->

			<!-- <view class="f24 mb20" v-if="dltype == 2">
				<label class="bj_between" style="align-items: flex-start;">
					<checkbox value="cb" checked="true"></checkbox>
					<text>{{$t('loginbox.tit9')}}</text>
				</label>
			</view> -->

			<view class="cab f28">
				{{$t('loginbox.tit5')}}
			</view>
		</view>
		<!-- 按钮区域 -->
		<view class="dlbtnbox">
			<view class="bj_center" v-if="dltype == 2">
				<image src="/static/lh.png" class="lhpic lhdh" mode="widthFix"></image>
				<text>{{$t('loginbox.tit6')}}</text>
			</view>
			<view class="dlbtn bj_center" @click="toact">
				{{btntxt}}
			</view>
			<view class="tc f28 fwb" style="padding: 0 36rpx;">
				{{$t('loginbox.tit7')}}
			</view>
		</view>

		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
		<zero-loading type="surround" v-if="loading"></zero-loading>
	</view>
</template>

<script setup>
	import {
		ref,
		inject
	} from 'vue';
	import {
		onShow
	} from "@dcloudio/uni-app"
	import useI18n from '@/store/useI18n.js'
	import common from '../../js/common';
	const {
		t
	} = useI18n()
	let dltype = ref(0)
	let xytag = ref(false)
	let bottomc = ref("") // 底部滑块样式类
	let btntxt = ref("") // 按钮文字
	let messageText = ref("")
	let message = ref(null)
	let msgType = ref("")
	let loading = ref(false)
	// 父级关闭的方法
	const clgc = inject("clgc");
	const props = defineProps({
		tag: {
			type: Number,
			default: 0 // 1是登录2是注册
		}
	});
	// 是否显示密码
	let Password = ref(true)

	let titlist = ref([{
			name: t("loginbox.tit1"),
			t: 1
		},
		{
			name: t("loginbox.tit2"),
			t: 2
		}
	])

	let form = ref({
		gj: "+55",
		tel: "",
		pass: "",
		code: getApp().globalData.code ? getApp().globalData.code : "VK8UAH"
	})

	onShow(function() {
		dltype.value = props.tag
		chtxt()
	})

	// 注册父级可调用的方法
	defineExpose({
		chzt
	})

	function showpass() {
		if (Password.value) {
			Password.value = false
		} else {
			Password.value = true
		}
	}

	// 切换菜单
	function chzt(item) {
		if (dltype.value != item.t) {
			bottomc.value = "todlitem" + item.t
			dltype.value = item.t
		}
		chtxt()
	}

	// 切换按钮文字
	function chtxt() {
		if (dltype.value == 1) {
			btntxt.value = t("loginbox.btntxt1")
		} else {
			btntxt.value = t("loginbox.btntxt2")
		}
	}

	function chxy() {
		if (xytag.value) {
			xytag.value = false
		} else {
			xytag.value = true
		}
	}

	function toact() {
		if (loading.value) {
			return
		}
		loading.value = true
		if (dltype.value == 1) { // 登录
			common.login({
				account: form.value.tel,
				password: form.value.pass
			}).then(res => {
				if (res.data.success) {
					localStorage.setItem("userInfo", JSON.stringify(res.data))
					getApp().globalData.userInfo = res.data
					clgc();
					pageinit();
				} else {
					messageText.value = res.data.message
					msgType.value = "error"
					message.value.open();
				}

			})
		} else { // 注册
			common.register({
				country_code: form.value.gj,
				username: form.value.tel,
				nickname: "",
				password: form.value.pass,
				repassword: form.value.pass,
				invite_code: form.value.code,
				click_id: JSON.parse(localStorage.getItem(`__rb_${common.roibest_appid}_click_id`)),
				link_id: JSON.parse(localStorage.getItem(`__rb_${common.roibest_appid}_link_id`))
			}).then(res => {
				if (res.data.success) {
					localStorage.setItem("userInfo", JSON.stringify(res.data))
					if (getApp().globalData.config2.pwa_register_open == 1) {
						// common.sendRoibestEvent('CompleteRegistration', {
						// 	is_upgrade_version: 1
						// }).then(rv => {
						// 	console.log(rv);
						// })
					}

					getApp().globalData.userInfo = res.data
					clgc();
					pageinit();
				} else {
					messageText.value = res.data.message
					msgType.value = "error"
					message.value.open();
				}
			})
		}
		loading.value = false
	}

	function pageinit() {

		common.rechargeInit({}, {
			"token": getApp().globalData.userInfo.token
		}).then(res => {
			getApp().globalData.recharge = res.data.data
		})

		common.getMinLoginUser({}, {
			"token": getApp().globalData.userInfo.token
		}).then(res => {
			if (res.statusCode == 200 && res.data.success) {
				getApp().globalData.userInfo.user = res.data.user
			}
		})

		common.vip({}, {
			"token": getApp().globalData.userInfo.token
		}).then(res => {
			if (res.statusCode == 200 && res.data.success) {
				getApp().globalData.userInfo.vipinfo = res.data.data
			}
		})
	}
</script>

<style lang="scss">
	.dlbox {
		display: flex;
		flex-flow: column;
		position: absolute;
		width: 100%;
		height: 840rpx;
		left: 0;
		bottom: 0;
		background: linear-gradient( 180deg, #007628 0%, #177747 100%);
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		padding: 36rpx 0 68rpx;

		.titbox {
			font-size: 36rpx;
			font-weight: 500;
			padding: 0 40rpx;

			.tititem {
				width: 190rpx;
			}

			&-bottom {
				position: relative;
				background: #003311;
				height: 8rpx;
				margin-top: 28rpx;

				&-bottomimg {
					position: absolute;
					width: 144rpx;
					height: 26rpx;
					left: 0;
					bottom: 0;
				}
			}
		}

		.dlinpbox {
			padding: 60rpx 40rpx 0;

			.icobox {
				padding-right: 30rpx;
				border-right: 2rpx solid #1D4B8E;

				image {
					width: 48rpx;
				}
			}

			.chyybox {
				text-align: center;
				width: 88rpx;
				font-size: 28rpx;
			}

			.telinp {
				width: 400rpx;
			}

			.passinp {
				margin-left: 20rpx;
				width: 450rpx;
			}
		}

		.dlbtnbox {
			flex-grow: 1;
			display: flex;
			flex-flow: column;
			justify-content: flex-end;
			padding: 0 20rpx;

			.dlbtn {
				height: 88rpx;
				background: linear-gradient( 360deg, #009E35 0%, #10E658 100%);
				border-radius: 12rpx;
				font-size: 40rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
				margin-top: 22rpx;
			}

			.lhpic {
				width: 48rpx;
				margin-right: 10rpx;
			}
		}
	}

	.todlitem1 {
		-webkit-animation: todlitem1d 0.1s 1 linear;
		animation: todlitem1d 0.1s 1 linear;
		animation-fill-mode: forwards;
		transform: translateX(72rpx);
	}

	@keyframes todlitem1d {
		0% {
			transform: translateX(430rpx);
		}

		100% {
			transform: translateX(72rpx);
		}
	}

	.todlitem2 {
		-webkit-animation: todlitem2d 0.1s 1 linear;
		animation: todlitem2d 0.1s 1 linear;
		animation-fill-mode: forwards;
		transform: translateX(430rpx);
	}

	@keyframes todlitem2d {
		0% {
			transform: translateX(72rpx);
		}

		100% {
			transform: translateX(430rpx);
		}
	}
</style>